<template>
  <div class="info">
    <div class="box2">
      <el-row>
        <el-col :span="24">
          <el-form :model="ruleForm" ref="ruleForm" label-width="100px" class="demo-dynamic">
            <el-form-item label="活动名称" prop="title">
              <el-input v-model="ruleForm.title"></el-input>
            </el-form-item>
            <el-form-item label="活动时间">
              <el-date-picker
                style="width:auto;"
                v-model="ruleForm.value1"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              ></el-date-picker>
            </el-form-item>
            <el-form-item label="一级分类" prop="first_cateid">
              <el-select v-model="ruleForm.first_cateid" @change="firstChange">
                <!-- <el-option label="请选择" :value="0"></el-option> -->
                <el-option
                  v-for="(item,index) in firstCateList"
                  :key="index"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="二级分类" prop="second_cateid">
              <!-- <el-select v-model="ruleForm.second_cateid"> -->
              <el-select v-model="ruleForm.second_cateid" @change="secondChange">
                <!-- <el-option label="请选择" :value="0"></el-option> -->
                <el-option
                  v-for="(item,index) in secondCateList"
                  :key="index"
                  :label="item.catename"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="goodsid" label="选择商品">
              <el-select v-model="ruleForm.goodsid">
                <el-option
                  v-for="(item,index) in goodsList"
                  :key="index"
                  :label="item.goodsname"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item>
              <el-button v-if="popType=='修改'" type="danger" @click="submitForm('ruleForm')">立即修改</el-button>
              <el-button v-else type="success" @click="submitForm('ruleForm')">立即添加</el-button>
              <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
  </div>
</template>
<script>
import { getCateList, getSecondCateList, getCateGoods } from "../../request";
export default {
  data() {
    return {
      ruleForm: this.transData,
      firstCateList: [],
      secondCateList: [],
      goodsList: [],
      rules: {
        title: [{ required: true, message: "请输入活动名称", trigger: "blur" }],
        first_cateid: [
          { required: true, message: "请选择二级分类名", trigger: "blur" }
        ],
        second_cateid: [
          { required: true, message: "请选择二级分类名", trigger: "blur" }
        ],
        goodsid: [
          { required: true, message: "请选择商品名称", trigger: "blur" }
        ]
      }
    };
  },
  props: ["transData", "popType"],
  created() {
    this.getData();
    this.getSencondList(this.transData.first_cateid);
    if (this.popType == "修改") {
      this.getGoodsList(this.transData.second_cateid);
    }
  },
  watch: {
    transData: {
      handler(newVal, oldVal) {
        this.getSencondList(newVal.first_cateid);
        if (this.popType == "修改") {
          this.getGoodsList(newVal.second_cateid);
        }
        this.ruleForm = newVal;
      },
      deep: true
    }
  },
  methods: {
    async getData() {
      let res = await getCateList();
      this.firstCateList = res;
    },
    async getSencondList(pid) {
      let res = await getSecondCateList(pid);
      this.secondCateList = res;
    },
    async getGoodsList(sid) {
      let res = await getCateGoods(sid);
      this.goodsList = res.list;
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          console.log(this.ruleForm.value1);
          console.log(this.ruleForm.value1[0]);
          
          console.log(typeof this.ruleForm.value1[0]);
          this.ruleForm.begintime = new Date(this.ruleForm.value1[0]).getTime();
          this.ruleForm.endtime = new Date(this.ruleForm.value1[1]).getTime();
          // 校验成功
          if (this.popType == "修改") {
            
            //   //修改
              this.$http
                .post("/seckedit", this.ruleForm)
                .then(res => {
                  this.$router.go(0);
                })
                .catch(err => {
                  console.log(err);
                });
          } else {
            // 新增
            this.$http
              .post("/seckadd", this.ruleForm)
              .then(res => {
                this.$router.go(0);
                console.log(res);
              })
              .catch(err => {
                console.log(err);
              });
          }
        } else {
          // 检验失败
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    // 监听一级分类
    async firstChange(val) {
      if (val) {
        this.ruleForm.second_cateid = "";
        this.ruleForm.goodsid = "";
        // this.secondCateList = await getSecondCateList(val);
        this.firstCateList.forEach(item => {
          if (item.id == this.ruleForm.first_cateid) {
            this.secondCateList = item.children ? item.children : [];
          }
        });
      }
    },
    async secondChange(val) {
      if (val) {
        this.ruleForm.goodsid = "";
        let res = await getCateGoods(val);
        this.goodsList = res.list;
      }
    }
  }
};
</script>
<style lang="" >
.info {
  width: 100%;
  height: auto;
  background: #fff;
}
.box2 {
  width: auto;
  margin: 20px 20px 0 0;
}
.el-dialog__body {
  padding: 0;
}
.el-dialog__footer {
  padding: 0px 20px 10px;
}
.el-dialog__wrapper {
  top: -70px;
}
</style>